import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/app/widget/logoWidget.dart';

import '../controllers/register_step2_controller.dart';

class RegisterStep2View extends GetView<RegisterStep2Controller> {
  const RegisterStep2View({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('手机号快速注册'),
        centerTitle: true,
      ),
      body: ListView(
        padding: EdgeInsets.all(ScreenAdapter.width(40)),
        children: [
          const LogoWidget(),
          SizedBox(
            height: ScreenAdapter.height(80),
          ),
          SizedBox(
            child: Column(
              children: [
                const Text(
                  "请输入验证码",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text.rich(TextSpan(
                    text: "已发送至 ",
                    style: const TextStyle(color: Colors.grey),
                    children: [
                      TextSpan(
                          text: controller.phone.replaceRange(3, 7, "****"),
                          style: const TextStyle(color: Colors.black))
                    ])),
              ],
            ),
          ),
          // 六格验证码
          Container(
            margin: EdgeInsets.only(top: ScreenAdapter.height(60)),
            padding: EdgeInsets.fromLTRB(ScreenAdapter.width(40),
                ScreenAdapter.width(40), ScreenAdapter.width(40), 0),
            child: PinCodeTextField(
              controller: controller.textEditingController,
              appContext: context,
              length: 6,
              autoFocus: true, // 自动弹出键盘
              keyboardType: TextInputType.number, // 数字键盘
              animationType: AnimationType.fade,
              animationDuration: const Duration(milliseconds: 300),
              dialogConfig: DialogConfig(
                  dialogTitle: "粘贴验证码",
                  dialogContent: "确定粘贴验证码？",
                  affirmativeText: "确定",
                  negativeText: "取消"), // 配置Dialog
              enableActiveFill: true,
              pinTheme: PinTheme(
                fieldHeight: 50,
                fieldWidth: 40,
                // 修改边框
                activeColor: Colors.black12, // 输入文字后边框的颜色
                selectedColor: Colors.orange, // 选中边框样式
                inactiveColor: Colors.black12, // 默认边框样式
                // 修改背景颜色
                activeFillColor: Colors.white,
                selectedFillColor: Colors.orange,
                inactiveFillColor: const Color.fromRGBO(245, 245, 245, 1),
                shape: PinCodeFieldShape.box,
                borderRadius: BorderRadius.circular(5),
              ),
              onChanged: (value) {
                print(value);
              },
              onCompleted: (value) async {
                print("输入完成：$value");
                print("text: ${controller.textEditingController.text}");
                // 隐藏键盘
                FocusScope.of(context).requestFocus(FocusNode());
                // 切换焦点
                // FocusScope.of(context).nextFocus();
                // FocusScope.of(context).previousFocus();

                // 验证验证码
                bool result = await controller.validateCode();
                if (result) {
                  Get.offAndToNamed("/register-step3", arguments: {
                    "tel": controller.phone,
                    "code": controller.textEditingController.text
                  });
                } else {
                  Get.snackbar("提示信息", "验证码验证失败");
                }
              },
              beforeTextPaste: (text) {
                print("粘贴验证码 : $text");
                return true;
              },
            ),
          ),
          SizedBox(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextButton(
                    onPressed: () {
                      controller.sendCode();
                    },
                    child: Obx(() => Text(
                          controller.seconds.value == 0
                              ? "重新发送"
                              : "重新发送(${controller.seconds.value})",
                          style: const TextStyle(color: Colors.black),
                        ))),
                TextButton(
                    onPressed: () {},
                    child: const Text(
                      "获取帮助",
                      style: TextStyle(color: Colors.black),
                    )),
              ],
            ),
          )
          // 重新发送验证码
        ],
      ),
    );
  }
}
